<!DOCTYPE html>
<html lang="en">
<head>
    <title>自动回复</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="${base}/res/manage/css/common.css">
    <link href="${base}/res/manage/css/ec.css" rel="stylesheet">
    <link href="${base}/res/manage/css/list.css" rel="stylesheet">
    <style type="text/css">
        textarea + p.perror {position: relative;top: 0;padding: 0;}
    </style>
    <script type="text/javascript" src="${base}/res/plugin/jquery/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="${base}/res/plugin/validator/jquery.validate.min.js"></script>
    <script type="text/javascript" src="${base}/res/admin/js/common.js"></script>
    <script type="text/javascript" src="${base}/res/plugin/magicThumb/magicthumb.js"></script>
    <script type="text/javascript" src="${base}/res/plugin/layer/layer.js"></script>
    <script type="text/javascript" src="${base}/res/util/utils.js"></script>
    <script type="text/javascript" src="${base}/res/plugin/laytpl/laytpl.js"></script>
    <script type="text/html" id="tpl">
        <tr>
            <td style="text-align: center">
                <input name="articleIds" type="hidden" value="{{d.id}}"/>
                <a href="{{d.image}}" class="MagicThumb" >
                    <img src="{{d.image}}" class="tdimg img" >
                </a>
            </td>
            <td style="text-align: center">
                {{d.name}}
            </td>
            <td class="icon">
                <a href="javascript:;" val="{{d.id}}" class="delete"></a>
            </td>
        </tr>
    </script>
    <script type="text/javascript">
        $(document).ready(function () {

            //表单验证，数据提交
            $("#inputForm").validate({
                rules: {
                    keyword: {
                        required: true,
                        maxlength: "50"
                    },
                    msgType: {
                        required: true
                    },
                    content: {
                        requiredByElemValue: ["msgType", "text"],
                        maxlength: "200"
                    },
                    isEnabled: {
                        required: true
                    }
                },
                messages: {
                    keyword: {
                        required: "必填项",
                        maxlength: "最多50个字符"
                    },
                    msgType: {
                        required: "必填项"
                    },
                    content: {
                        maxlength: "最长200个子字符"
                    },
                    isEnabled: {
                        required: "必填项"
                    }
                },
                submitHandler: function (form) {
                    //表单提交
                    form.submit();

                }
            });

            //消息类型点击事件
            $("input[name='msgType']").click(function () {
                var $this = $(this);
                if ($this.val() == "text") {
                    $("#contentTr").show();
                    $("#content").attr("disabled", false);
                    $("tr[name='imageTr']").hide();
                    $("input[name='imageIds']").attr("disabled", true);
                } else {
                    $("#contentTr").hide();
                    $("#content").attr("disabled", true);
                    $("tr[name='imageTr']").show();
                    $("input[name='imageIds']").attr("disabled", false);
                }
            });

            // 图文消息表格中的删除事件
            $(document).delegate("a[val]", "click", function () {
                var _this = $(this);
                _this.closest("tr").remove();
            });

        });

        //图文消息表格自定义函数
        function build(arr) {
            var _imageTr = $("#imageTable");
            $(arr).each(function () {
                var _this = this;
                var existArticle = $("input[name='articleIds']");
                if (existArticle && existArticle.length >= 10) {
                    alert("最多只能添加10条图文消息!");
                    return false;
                }
                if ($("input[name='articleIds'][value='" + com.project.common.web.utils.id + "']")[0]) {
                    return true;
                }
                laytpl($("#tpl").html()).render(_this, function (html) {
                    _imageTr.append(html);
                });
            });
            MagicThumb.start();
        }
    </script>
</head>
<body>
[#--主体--]
<div class="tab set">
    <h3><a href="list.jhtml">消息自动回复管理</a><a href="add.jhtml">> 添加消息自动回复</a></h3>
    <div class="message set" style="height:;">
        <form id="inputForm" name="inputForm" action="save.jhtml" method="post">
            <table cellpadding="0" cellspacing="0" style="table-layout:fixed;">
                <tr>
                    <td><label>关键字<span class="cred"> * </span></label></td>
                    <td>
                        <input type="text" id="keyword" name="keyword" placeholder="关键字">
                    </td>

                    <td><label>是否可用<span class="cred"> * </span></label></td>
                    <td>
                    [@stdCode codeType="IS_ENABLED" all=false]
                        [#list codeMap.entrySet() as entry]
                            <label class="status"><input name="isEnabled" id="isEnabled" type="radio" value="${entry.key}" class="sex" [#if entry_index == 0] checked[/#if]>${entry.value}</label>
                        [/#list]
                    [/@stdCode]
                    </td>
                </tr>
                <tr>
                    <td><label>消息类型<span class="cred"> * </span></label></td>
                    <td>
                    [@stdCode codeType="WX_REPLAY_MSG_TYPE" all=false]
                        [#list codeMap.entrySet() as entry]
                            <label class="status"><input name="msgType" id="msgType" type="radio" value="${entry.key}" [#if entry_index == 0] checked[/#if]>${entry.value}</label>
                        [/#list]
                    [/@stdCode]
                    </td>
                </tr>
                <tr class="display" name="imageTr">
                    <td><label>图文内容</label></td>
                    <td colspan="3"><input value="添加" type="button" id="image" onclick="showLWin('图文内容','${base}/intfc/wxArticle/listContent.jhtml','650px','480px')" class="red" /></td>
                </tr>
                <tr class="display" id="imageTr" name="imageTr">
                    <td></td>
                    <td colspan="3" class="tab tabwidth">
                        <table id="imageTable" cellpadding="0" cellspacing="0">
                            <tr class="th">
                                <td style="text-align: center" >图片</td>
                                <td style="text-align: center">图文名称</td>
                                <td class="icon">操作</td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr id="contentTr">
                    <td><label>链接/回复内容:</label></td>
                    <td>
                        <textarea placeholder="链接/回复内容" name="content" id="content"></textarea>
                    </td>
                </tr>
            </table>
            <p class="save">
                <input type="submit" value="保存" class="red">
                <input type="button" value="取消" id="backButton" class="red">
            </p>
        </form>
    </div>
</div>
</body>
</html>